import React from 'react';
import { Outlet } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Layout, theme } from 'antd';
import CommonAside from "../components/commonAside";
import CommonHeader from "../components/commonHeader";
import CommonTag from "../components/commonTag";
import RouterAuth from "../router/routerAuth";
const { Content } = Layout;
const Main = () =>{
    // const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    // 获取展开收起状态
    const isCollapsed =  useSelector(state => state.tab.isCollapsed)
    return (
       <RouterAuth>
           <Layout className="main-container">
               <CommonAside isCollapsed={isCollapsed} />
               <Layout>
                   <CommonHeader isCollapsed={isCollapsed} />
                   <CommonTag />
                   <Content
                       style={{
                           margin: '24px 16px',
                           padding: 24,
                           background: colorBgContainer,
                           borderRadius: borderRadiusLG,
                       }}
                   >
                       <Outlet />
                   </Content>
               </Layout>
           </Layout>
       </RouterAuth>
    );
  }
export default Main
